<template>
  <div class="movie-detail page">
    <div class="header">
      <van-nav-bar
          left-arrow
          :title="video.vod_name || '正在获取详情'"
          @click-left="$router.back()"
      />
    </div>
    <div class="movie-video">
      <div class="movie-panl">
        <div id="example-video-div">
          <video
              id="playerId"
              class="custom_videoJS video-js"/>
          <div
              v-if="setup"
              class="custom_video"
              v-loading="setup === 2"
              element-loading-spinner="el-icon-loading"
              element-loading-text="视频加载中请稍等片刻"
              element-loading-background="rgba(0,0,0,0.5)">
            <img v-lazy="video.vod_pic" width="100%" height="100%">
            <div class="custom_overlay"></div>
            <span v-if="setup !== 2" class="custom_video_play iconfont-movie"
                  @click="initVideoDetail"/>
            <span v-if="setup === 3" class="custom_video_error" @click="initVideoDetail">{{
                video_error
              }}</span>
          </div>
        </div>
      </div>
      <!-- <ul class="lines-ul">
        <li>
          <div class="active-url" @click="play">线路1</div>
        </li>
        <li>
          <div class="">线路2</div>
        </li>
        <li>
          <div class="">线路3</div>
        </li>
        <li>
          <div class="">线路4</div>
        </li>
        <li>
          <div class="">线路5</div>
        </li>
      </ul> -->
    </div>
    <div class="movie-content">
      <div class="movie-descript">
        <p class="videoTitle">{{ video.vod_name }}</p>
        <span>播放：{{ video.vod_score_num }}</span>
        <span>我的观影券：{{ userInfo.video_num }}</span>
      </div>
      <div class="movie-body">
        <div class="movie-title">
          <div><span>热门推荐</span></div>
        </div>
        <ul class="movie-list">
          <li class="movie-play-item" v-for="item in hot" :key="item.id" @click="gotoDetail(item.id)">
            <div><img v-lazy="item.vod_pic">
              <div>
                <div class="van-count-down">{{ item.vod_duration ? item.vod_duration : "00:00:00" }}</div>
              </div>
            </div>
            <div><p>{{ item.vod_name }}</p><span
            >{{ item.count }}次播放</span></div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import "video.js/dist/video-js.css";
import {Toast} from "vant";
import {getPlayerDetail, hotVideoList, videoDetail} from "@api/Video";
import videojs from "video.js";
import {mapGetters} from "vuex";

export default {
  name: "MovieDetail",
  computed: mapGetters(["userInfo"]),
  data: function () {
    return {
      // 0.完成 1.播放 2.加载 3.错误
      setup: 1,
      video_error: undefined,
      hot: [],
      video: {},
      player: undefined
    };
  },
  activated() {
    this.setup = 1;
    this.video_error = undefined;
    this.initHot();
  },
  created() {
    let id = this.$route.query.id, that = this;
    if (!id) {
      Toast.fail({
        message: "无法访问当前页面",
        forbidClick: true,
        duration: 3000,
        onClose: () => {
          that.$router.back();
        }
      });
      return;
    }
    this.id = this.$route.query.id;
    this.initDetail();
  },
  destroyed() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    initHot: function () {
      hotVideoList(1).then(v => {
        this.hot = v.data.data;
      })
    },
    initDetail: function () {
      let that = this;
      videoDetail(this.id).then(v => {
        Toast.clear();
        this.video = v.data;
      }).catch(e => {
        Toast.clear();
        let msg = e && e.msg ? e.msg : "视频数据获取失败"
        Toast.fail({
          message: msg,
          forbidClick: true,
          duration: 3000,
          onClose: () => {
            that.$router.back();
          }
        })
      })
    },
    initVideo: function (videoURL) {
      let that = this;
      if (!this.player) {
        this.player = videojs("playerId", {
          bigPlayButton: true,
          textTrackDisplay: true,
          posterImage: true,
          errorDisplay: true,
          controls: true,
          controlBar: true,
          preload: true,
          sources: {
            type: videoURL.endsWith(".mp4") ? "video/mp4" : "application/x-mpegURL",
            src: videoURL,
          }
        }, function onPlayerReady() {
          this.on('loadedmetadata', function () {//成功获取资源长度
            that.setup = 0;
            that.player.play();
          });
          this.on('error', function () {//请求数据时遇到错误
            that.setup = 3;
            that.video_error = "视频加载失败,请重新播放或者刷新页面";
          });
        });
      } else {
        this.player.src({
          type: videoURL.endsWith(".mp4") ? "video/mp4" : "application/x-mpegURL",
          src: videoURL,
        })
        this.player.load();
      }
    },
    gotoDetail: function (id) {
      if (this.player && !this.player.paused()) {
        this.player.pause();
      }
      this.setup = 1;
      this.video_error = "";
      this.$router.push({name: "MovieDetail", query: {id}})
      this.id = id;
      let that = this;
      Toast.loading({
        message: "加载中, 请稍后",
        duration: 0,
        forbidClick: false,
        onOpened: function () {
          that.initDetail();
        }
      })
    },
    initVideoDetail: function () {
      let that = this;
      // 0.完成 1.播放 2.加载 3.错误
      that.setup = 2;
      getPlayerDetail(this.id).then(v => {
        that.$store.dispatch("saveUserInfo", v.data.user);
        that.initVideo(v.data.vod_play_url);
      }).catch(e => {
        let msg = e.msg || "获取视频播放地址失败!"
        that.setup = 1;
        that.video_error = undefined;
        Toast.fail({
          message: msg,
          duration: 3000,
          forbidClick: true
        })
      })
    }
  }
};
</script>
<style scoped>
::v-deep .van-icon {
  color: var(--van-nav-bar-icon-color);
}

::v-deep .van-nav-bar__title {
  color: var(--van-nav-bar-title-text-color);
  font-weight: bolder;
}

::v-deep .el-icon-loading, ::v-deep .el-loading-text {
  color: white;
}

.custom_video {
  width: 100%;
  height: 100%;
  z-index: 9999;
  background-color: black;
  position: absolute
}

.custom_videoJS {
  width: 100%;
  height: 100%;
  position: absolute;
}

.custom_video_play {
  color: white;
  font-size: .7rem;
  top: calc(50% - .35rem);
  left: calc(50% - .35rem);
  position: absolute
}

.custom_video_error {
  color: white;
  width: 100%;
  font-size: .35rem;
  padding: .5rem .5rem 0;
  text-align: center;
  top: 0;
  left: 0;
  position: absolute
}

.custom_overlay {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: absolute;
  left: 0;
  top: 0;
}

.videoTitle {
  width: 100%;
  overflow: hidden;
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.movie-dialog {
  width: 100%;
  height: 6.13333rem
}

.movie-dialog > div {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto
}

.movie-dialog .movie-dialog-title {
  height: 1.33333rem;
  padding: 0 .26667rem;
  background: linear-gradient(90deg, #fff, #fff);
  justify-content: space-between
}

.movie-dialog .movie-dialog-title {
  color: #fff
}

.movie-dialog .movie-dialog-body {
  width: 6.66667rem;
  height: 2.66667rem
}

.movie-dialog .movie-dialog-body p {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  color: #000
}

.movie-dialog .movie-dialog-btn {
  height: .8rem
}

.movie-dialog .movie-dialog-btn button {
  width: 5.86667rem;
  height: 100%;
  border-radius: .4rem;
  background-color: #e38afb;
  color: #fff;
  font-size: .32rem
}

.movie-dialog .movie-dialog-btn .disableBtn {
  background-color: #cacaca
}

.movie-dialog .movie-dialog-myExchange span {
  font-size: .32rem;
  margin-top: .13333rem
}

.movie-dialog .movie-dialog-myExchange span:first-child {
  color: #000
}

.movie-dialog .movie-dialog-myExchange span:nth-child(2) {
  color: #ff253f
}

.movie-play-item {
  width: 100%;
  height: 2.66667rem;
  border-radius: .13333rem;
  position: relative;
  display: flex;
  background-color: #fcf0fa;
  margin-bottom: .26667rem
}


.movie-play-item > div:first-child {
  width: 2.66667rem;
  position: relative
}

.movie-play-item > div:first-child > img {
  width: 100%;
  height: 100%;
  border-radius: .13333rem 0 0 .13333rem;
  -o-object-fit: cover;
  object-fit: cover
}

.movie-play-item > div:first-child > div {
  position: absolute;
  width: calc(100% - .26666rem);
  height: .53333rem;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 .13333rem;
  background-color: rgba(0, 0, 0, .4);
  border-radius: 0 0 0 .13333rem
}

.movie-play-item > div:first-child > div .van-count-down {
  color: #fff;
  font-size: .32rem
}

.movie-play-item > div:nth-child(2) {
  width: calc(100% - 2.66667rem);
  padding: .4rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between
}

.movie-play-item > div:nth-child(2) p {
  height: 1.33333rem;
  font-size: .37333rem;
  line-height: .4rem;
  word-break: break-all;
  overflow: hidden;
  color: #000
}

.movie-play-item > div:nth-child(2) span {
  color: #000
}

.vjs-progress-control {
  display: flex !important
}

.movie-detail {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100% - 1.5rem);
  overflow: hidden;
}

.movie-detail .header {
  background: linear-gradient(270deg, #fff, #fff)
}

.movie-detail .header .nav {
  background-color: transparent
}

.movie-detail .header .nav .van-nav-bar__text {
  color: #fff
}

.movie-detail .movie-video {
  width: 100%
}

.movie-detail .movie-video .lines-ul {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  margin: .13333rem 0 0
}

.movie-detail .movie-video .lines-ul li {
  width: 17%;
  height: .8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: .05333rem
}

.movie-detail .movie-video .lines-ul li .active-url {
  background-color: #e38afb
}

.movie-detail .movie-video .lines-ul li > div {
  width: 2.13333rem;
  height: .74667rem;
  background-color: rgba(227, 138, 251, .5);
  border-radius: .10667rem;
  color: #fff;
  font-size: .32rem;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
  word-break: normal
}

.movie-detail .movie-video .movie-panl {
  width: 100%;
  position: relative;
  padding-bottom: 56.25%;
  background-color: #000
}

.movie-detail .movie-video .movie-panl #example-video-div {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0
}

.movie-detail .movie-video .movie-panl #example-video-div .LimitPlay .vjs-progress-control {
  display: none
}

.movie-detail .movie-video .movie-panl #example-video-div #example-video {
  width: 100%;
  height: 100% !important
}

.movie-detail .movie-video .movie-panl #example-video-div #example-video video {
  width: 100%;
  height: 100%
}

.movie-detail .movie-content {
  flex: 1;
  overflow-y: auto;
}

.movie-detail .movie-content .movie-descript {
  width: 100%;
  height: 2.13333rem;
  background-color: #fff;
  padding: .26667rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between
}

.movie-detail .movie-content .movie-descript p {
  font-size: .37333rem;
  font-weight: 700;
  color: #000
}

.movie-detail .movie-content .movie-descript span {
  color: #979799;
  font-weight: 700
}

.movie-detail .movie-content .movie-body {
  width: calc(100% - .53333rem);
  margin: 0 auto;
}

.movie-detail .movie-content .movie-body .movie-title {
  height: 1.06667rem;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.movie-detail .movie-content .movie-body .movie-title > div {
  display: flex;
  align-items: center;
  justify-content: flex-start
}

.movie-detail .movie-content .movie-body .movie-title > div:first-child {
  width: 4rem
}

.movie-detail .movie-content .movie-body .movie-title > div:first-child span {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: .37333rem;
  font-weight: 700;
  color: #000
}

.movie-detail .movie-content .movie-body .movie-title > div:first-child span:before {
  content: "";
  display: block;
  width: .08rem;
  height: .37333rem;
  background-color: #e38afb;
  border-radius: .13333rem;
  margin-right: .08rem
}

.movie-detail .loadingDiv {
  width: 100%;
  height: calc(100% - 1.33333rem);
  display: flex;
  align-items: center;
  justify-content: center
}

</style>
